<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 500px;
            height: 80px;
            border: 1px solid red;
        }
        .div1{
            background-color: red;
        }
        .div2{
            background-color: yellow;
        }
        .div3{
            background-color: green;
        }
        .div4{
            background-color: blue;
        }
    </style>

</head>
<body>
<h3>[att^=val]、[att*=val]、[att$=val]、[att!=val]</h3>
<div testattr="true"  >
    <div class="div" testattr="true"  name='imooc-aaorn'>
        <a>[att^=val]</a>
    </div>
    <div class="div" testattr="true"  name='aaorn-imooc'>
        <a>[att$=val]</a>
    </div>
    <div class="div" testattr="true"  name="attr-test-selector">
        <a>[att*=val]</a>
    </div>
    <div class="div" name="a b" testattr="false">
        <a>[att!=val]</a>
    </div>
    <div class="div" name="ab"  >
        <a>[att!=val]</a>
    </div>
    <div class="div" name="ab" test >
        <a>[att!=val]</a>
    </div>
</div>


<script type="text/javascript" src="js/jquery-3.1.0.js"></script>
<script>
$("div[name^='imooc']").addClass("div1");//div标签里name属性=imooc开头的属性值
    $("div[name$='imooc']").addClass("div2");//imooc结尾的变色
    $("div[name*='test']").addClass("div3");//name属性值中只要有test 就变色
    $("div[testattr!='true']").addClass("div4");//div标签中 testattr属性中不等于true的 变色
    $("div[name='ab']").html("name=ab的 div 文本变")
    $("div[test]").html("div中有test属性的文本显示")
</script>
</body>
</html>